<template>
  <div class="wenlv-box">
    <div class="item flex_center fl" v-for="(item,index) in data" :key="index">
      <div style=" display: flex; align-items: center; justify-content: flex-start;">
        <span class="flipper-span margin-right">{{item.name}}</span>
        <FlipperBig :val="item.value"></FlipperBig>
        <span class="flipper-span">元</span>
      </div>
      <div style="display: flex; align-items: center; justify-content: start;">
        <span class="flipper-span ">人流量：</span>
        <span class="flipper-number text-yellow">{{item.person}}</span>
        <span class="flipper-span text-yellow">人</span>
      </div>
      <div style="display: flex; align-items: center;justify-content: flex-end;">
        <span class="flipper-span ">较昨日：</span>
        <span class="flipper-number" :class="item.type=='up'?'text-green':'text-red'">{{item.rate}}</span>
        <div class="up" v-if="item.type=='up'"></div>
        <div class="down" v-else></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Wenlv",
    props: {
      data: {
        // 返回的数据
        type: Array,
        default: function () {
          return [];
        },
      },
    },
    data() {
      return {


      }
    },
    mounted() {

    },
    beforeDestroy() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .wenlv-box {
    width: 100%;
    height: 100%;

    .item {
      width: 100%;

      justify-content: space-between;

      .margin-right {
        margin-right: 10px;
      }

    }
  }
</style>